<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/mouseRightMenu.css">
    <link rel="stylesheet" href="../statics/css/style.css?v=102">
    <style>
        .layui-table td, .layui-table th {
            min-width: 40px;
        }
        .layui-table-cell {
            padding: 0px 5px;
            text-align: center;
        }
    </style>
</head>
<body class='labelAuto'>
<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">人力资源管理</a>
            <a>
                <cite>考勤列表</cite></a>
        </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid attendance">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body search">
                    <form action="" class="layui-form livingList">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">月历</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="month" placeholder="yyyy-MM">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">项目</label>
                                <div class="layui-input-block">
                                    <select name="" id="project">
                                        <option value="">-</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn search" type="button" id='search'>
                                    <i class="iconfont layui-icon">&#xe615;</i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body tableCardBody">
                    <div class="layui-unselect layui-form-select layui-form-selected" id="rightMenu" style="display: none;position:fixed;z-index:999999">
                        <dl>
                            <dd data-type="this">关闭当前</dd>
                            <dd data-type="other">关闭其它</dd>
                            <dd data-type="all">关闭全部</dd>
                        </dl>
                    </div>
                    <table class="layui-table" id="lists" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<!--<script type='text/html' id='toolbar'>-->
<!--    <button type="button" class='addAttendants layui-btn' auth='attendanceSupplement'>添加出勤人员</button>-->
<!--&lt;!&ndash;    <button type="button" class='batchSet  layui-btn'>批量设置</button>&ndash;&gt;-->
<!--    <button type="button" class='save  layui-btn' auth='attendanceSave'>保存</button>-->
<!--    <span>双击考勤区域的单元格修改当前月份的考勤</span>-->
<!--</script>-->
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/javascript">
    layui.config({
        base: '../statics/js/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        regionSelect: 'mouseRightMenu/mouseRightMenu' //以 regionSelect 组件为例，定义该组件模块名
    }).use(['form', 'layer', "table", "laydate","mouseRightMenu"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var mouseRightMenu = layui.mouseRightMenu;
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()<9?'0'+(date.getMonth()+1):(date.getMonth()+1);
        laydate.render({
            elem: '#month'
            , type: 'month'
            , value: year + '-' + month
            , max:0
        });
        $('#project').empty().html(projectSelect());
        form.render()

        var days = (new Date(year, month, 0)).getDate();
        var column = [ //表头
            {field: '', title: '编号', type: 'numbers',width:40,fixed:'left'},
            {field: 'name', title: '姓名',width:70,fixed:'left'},
            {field: 'jobNumber', title: '工号',width:50,fixed:'left'},
            {field: 'professionName', title: '工种',width:90,fixed:'left'},
            {field: 'projectName', title: '现属项目',width:160,fixed:'left'},
            {
                field: 'status', title: '状态',width:50,fixed:'left', templet(d) {
                    return d.status == 1 ? "在岗" : d.status == 2 ? "待岗" : d.status == 3 ? "请假" : d.status == 4 ? "离职" : "";
                }
            },
            { field: 1, title: 1,templet:function(d){return columnCallBack(d,1)}},
            { field: 2, title: 2,templet:function(d){return columnCallBack(d,2)}},
            { field: 3, title: 3,templet:function(d){return columnCallBack(d,3)}},
            { field: 4, title: 4,templet:function(d){return columnCallBack(d,4)}},
            { field: 5, title: 5,templet:function(d){return columnCallBack(d,5)}},
            { field: 6, title: 6,templet:function(d){return columnCallBack(d,6)}},
            { field: 7, title: 7,templet:function(d){return columnCallBack(d,7)}},
            { field: 8, title: 8,templet:function(d){return columnCallBack(d,8)}},
            { field: 9, title: 9,templet:function(d){return columnCallBack(d,9)}},
            { field: 10, title: 10,templet:function(d){return columnCallBack(d,10)}},
            { field: 11, title: 11,templet:function(d){return columnCallBack(d,11)}},
            { field: 12, title: 12,templet:function(d){return columnCallBack(d,12)}},
            { field: 13, title: 13,templet:function(d){return columnCallBack(d,13)}},
            { field: 14, title: 14,templet:function(d){return columnCallBack(d,14)}},
            { field: 15, title: 15,templet:function(d){return columnCallBack(d,15)}},
            { field: 16, title: 16,templet:function(d){return columnCallBack(d,16)}},
            { field: 17, title: 17,templet:function(d){return columnCallBack(d,17)}},
            { field: 18, title: 18,templet:function(d){return columnCallBack(d,18)}},
            { field: 19, title: 19,templet:function(d){return columnCallBack(d,19)}},
            { field: 20, title: 20,templet:function(d){return columnCallBack(d,20)}},
            { field: 21, title: 21,templet:function(d){return columnCallBack(d,21)}},
            { field: 22, title: 22,templet:function(d){return columnCallBack(d,22)}},
            { field: 23, title: 23,templet:function(d){return columnCallBack(d,23)}},
            { field: 24, title: 24,templet:function(d){return columnCallBack(d,24)}},
            { field: 25, title: 25,templet:function(d){return columnCallBack(d,25)}},
            { field: 26, title: 26,templet:function(d){return columnCallBack(d,26)}},
            { field: 27, title: 27,templet:function(d){return columnCallBack(d,27)}},
            { field: 28, title: 28,templet:function(d){return columnCallBack(d,28)}},
            { field: 29, title: 29,templet:function(d){return columnCallBack(d,29)}},
            { field: 30, title: 30,templet:function(d){return columnCallBack(d,30)}},
            { field: 31, title: 31,templet:function(d){return columnCallBack(d,31)}},
            {
                field: 'sum', title: '汇总', width: 70, templet: function (d) {
                    var sum = 0;
                    for (var i in d.attendance) {
                        sum += Number(d.attendance[i].long);
                    }
                    return `<span title="" class='currProject'>${sum}</span>`;
                }
            },
        ];

        var minus = 31-days;
        var tmpColumn = column.slice(0);
        for (var m = 0; m < minus; m++) {
            // tmpColumn.pop();
            tmpColumn.splice(-2,1);
        }
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/hrm/employee/attendanceList', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function (res) {
                return {
                    "code": res.code, //解析接口状态
                    "data": res.data,
                    "msg": res.msg,
                };
            },
            where: {
                projectId: 0,
                month:year + '-' + month,
                token: getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: [{title: '提示说明', layEvent: 'tips', icon: 'layui-icon-tips'},{title:'导出',layEvent:'excel',icon:'layui-icon-export'}],
            page: false, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                tmpColumn
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done:function (res,curr,count) {
                this.cols = []; //（关键代码）将cols初始化，否则表格重载时无法正确重新渲染表头
            }
        });

        table.on('toolbar(test)', function (data) {
            if (data.event == 'excel') {
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.open({
                        type: 0,
                        title: "考勤列表",
                        area: ["40%", '30%'],
                        content: `当前考勤列表正在生成中,请稍等!`,
                        btn: ['关闭'],
                        skin: 'my-skin'
                    })
                });
                var projectId = $('#project option:selected').val();
                $.ajax({
                    url: url + '/excel/export/attendanceAll',
                    type: 'post',
                    data: {
                        projectId: projectId ? Number(projectId) : 0,
                        month: $('input#month').val(),
                        token: getParam('token')
                    },
                    success: function (r) {
                        if (r.code == 100000) {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.closeAll();
                                layer.open({
                                    type: 0,
                                    title: "导出",
                                    area: ["40%", '30%'],
                                    content: `<p class='one_p'>${r.msg}</p>`,
                                    btn: ['关闭'],
                                    skin: 'my-skin'
                                })
                            });
                        } else {
                            layui.use('layer', function () {
                                var layer = layui.layer;
                                layer.closeAll();
                                layer.open({
                                    type: 0,
                                    title: "导出",
                                    area: ["40%", '30%'],
                                    content: `<p class='one_p'>${r.msg}</p>`,
                                    btn: ['关闭'],
                                    skin: 'my-skin'
                                })
                            });
                        }
                    }
                })
            }else if (data.event == 'tips') {
                layer.open({
                    type: 0,
                    title: "提示",
                    area: ["40%", '40%'],
                    content: `<ul>
                                <li>1.考勤记录若与工人当前所在项目相同，记录显示绿色，不相同则显示红色</li>
                                <li>2.鼠标指针移到考勤记录的数字上会显示记录来自哪个项目</li>
                              </ul>`,
                    btn: ['关闭'],
                    skin: 'my-skin'
                })
            }
        });

        $('body').on('contextmenu','.layui-table-main td',function(e){
            if (hasPermission('deleteAttendance')){
                var field = parseInt($(this).data('field'));
                if (field && (field>=1 &&field<=31)){
                    var id = $(this).find('span').data('id');
                    var name = $(this).find('span').data('name');
                    var day = $(this).find('span').data('day');
                    var projectName = $(this).find('span').attr('title');
                    var long = $(this).find('span').html();
                    var menu_data=[
                        {'data':{id:id,name:name,day:day,projectName:projectName,long:long},'type':'delete','title':'删除考勤'},
                    ];
                    mouseRightMenu.open(menu_data,false,function(d){
                        // layer.alert(JSON.stringify(d));
                        // console.log(d)//输出：{'data':data,'type':4,'title':'粘贴'}
                        //阻止默认事件（点击关闭菜单）
                    })
                }
                return false;
            }
        });

        $('body').on('click','div[data-type=delete]',function(e){
            var data = JSON.parse($(this).find('a').html());
            layer.open({
                type: 0,
                title: "删除考勤",
                area: ['40%', '30%'],
                content: `是否删除 ${data.name} 在 ${data.projectName} 在 ${data.day} 的考勤 ${data.long} 天`,
                btn: ['确认', '取消'],
                skin: 'my-skin',
                yes: function (index, layero) {
                    $.ajax({
                        url: url + '/hrm/employee/deleteAttendance',
                        type: "post",
                        data: {
                            id: Number(data.id),
                            token: getToken()
                        },
                        dataType: "json",
                        success: function (r) {
                            if (r.code == 100000) {
                                tips('删除考勤', r);
                                setTimeout(function () {
                                    layer.closeAll();
                                    table.reload('lists', {
                                        cols: [
                                            tmpColumn
                                        ],
                                    })
                                }, 2000)
                            } else {
                                tips('删除考勤', r);
                            }
                        }
                    })
                }
            })
        })

        //搜索
        $('body').on('click', '#search', function () {
            var projectId = $('#project option:selected').val();
            var month_search = $('input#month').val()
            year = month_search.substr(0,4);
            month = month_search.substr(5,2);
            days = (new Date(year, month, 0)).getDate();
            minus = 31 - days;
            tmpColumn = column.slice(0);
            for (var m = 0; m < minus; m++) {
                // tmpColumn.pop();
                tmpColumn.splice(-2,1);
            }
            table.reload('lists', {
                cols: [
                    tmpColumn
                ],
                where: {
                    token: getToken(),
                    projectId: projectId ? Number(projectId) : 0,
                    month:month_search
                }
            })
        })

        function columnCallBack(d,i){
            var className = '';
            if (d.projectId ==d.attendance[i].projectId){
                className = 'currProject'
                if (d.attendance[i].isCurrent === 1){
                    className = 'currProjectCurrDay';
                }else{
                    className = 'currProjectOtherDay';
                }
            }else{
                className = 'otherProject'
            }
            return `<span title="${d.attendance[i].projectName}" class=${className} data-id="${d.attendance[i].id}" data-name="${d.name}" data-day="${d.attendance[i].day}">${d.attendance[i].long}</span>`
        }
    });
</script>

</html>